<!DOCTYPE html>
<html lang="ch">
<head>



    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房贷本息平均摊还法</title>
    <link rel="stylesheet" href="../../layuimini/lib/layui-v2.6.3/css/layui.css" type="text/css">

    <style>
        .item {
            display: flex;
            margin-top: 35px;
        }
        button {
            margin-top: 30px;
        }
        #mydiv {
            margin-left: 20px;
        }
        #put1 {
            display: inline-block;
            /* margin-left: 10px; */
        }
        button {
            background-color: rgba(142, 156, 163, 0.2);
            /* border: none; */
        }
        #app {
            width: 50%;
            margin-left: 680px;
            padding-left: 20px;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
<h2 align="center">房贷本息平均摊还法</h2>
<div id="app">

    <div class="item">
        <div>总金额：(单位：万)</div>
        <input type="number" v-model="total" name="" id="">
    </div>
    <div class="item">
        <div>利率：（%）</div>
        <input type="number" v-model="rate" name="" id="">
    </div>
    <div class="item">
        <div>期限：（单位：年）</div>
        <input type="number" v-model="year" name="" id="">
    </div>

    <div class="item">
        <div>每月应还金额：</div>
        <input type="text" v-model="result" name="" id="">
    </div>
    <div class="item">
        <div>还款总额：</div>
        <input type="text" v-model="total_er" name="" id="">
    </div>
    <div class="item">
        <div>利息总额：</div>
        <input type="text" v-model="total_lixi" name="" id="">
    </div>

    <button class="layui-btn layui-btn-radius layui-btn-normal" @click="compontedBX">计算等额本息</button>


    <div v-if="isShow" class="item"  v-for="(item, index) in list" :key="index">
        <div > 第{{index + 1}}月 </div>
        <div >应还金额：{{item.res}}</div>
        <div id="mydiv"> 剩余未还金额：{{item.yu}} </div>
    </div>

</div>
<script src="./vue.common.dev.js" type="text/javascript"></script>

<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                isShow:true,
                total: 10,
                rate: 4.9,
                year: 1,
                result: '',
                list: [],
                total_lixi: '',
                total_er: '',
                dijian: ''
            }
        },
        computed: {
            c_total() {
                return this.total * 10000
            },
            c_rate() {
                return this.rate / 100 / 12
            },
            c_months() {
                return this.year * 12
            }
        },
        methods: {
            // 等额本息  每月还本付息金额=[贷款本金×月利率×(1+月利率)^还款月数]÷[(1+月利率)^还款月数-1]

            // 每月应还利息=贷款本金×月利率×〔(1+月利率)^还款月数-(1+月利率)^(还款月序号-1)〕÷〔(1+月利率)^还款月数-1〕

            // 每月应还本金=贷款本金×月利率×(1+月利率)^(还款月序号-1)÷〔(1+月利率)^还款月数-1〕

            // 总利息=还款月数×每月月供额-贷款本金
            compontedBX() {
                // 每月月供       贷款本金      月利率                                       还款总月数 例： 10 年 就是 10 * 12 = 120 期
                let result = (this.c_total * this.c_rate * Math.pow( 1 + this.c_rate, this.c_months )) / ( Math.pow(1 + this.c_rate, this.c_months) - 1 )
                this.isShow=true
                this.result = result.toFixed(2)
                let total_rate = result.toFixed(2) * this.c_months
                for(let i = 1; i <= this.c_months; i++) {
                    this.list.push({res: result.toFixed(2), yu: (total_rate- result.toFixed(2) * i).toFixed(2)})
                }
                // 总利息
                this.total_lixi = (this.c_months * result - this.c_total).toFixed(2)
                this.total_er = (Number(this.total_lixi) + Number(this.c_total)).toFixed(2)
                console.log(result)
            },


        }
    })


</script>



</body>
</html>